<template>
  <div class="shop">
    <div class="header">
      <div class="h-img-div"><img :src="shopInfo.thumb" alt="" id="headimg" :onerror="errorImg01"></div>
      <div class="shop-info">
        <h1>{{shopInfo.name}}</h1>
        <span @click="changeStatus">{{shopStatusStr}}&nbsp;></span>
      </div>
    </div>

    <div class="wrapper" ref="askWrapper">
      <div class="content">
        <div class="shop-data">
          <div class="data-detail">
            <div class="data-cell">
              <h1>今日营业额</h1>
              <span>{{shopObj.today_money}}</span>
            </div>
            <div class="data-cell">
              <h1>今日订单数</h1>
              <span>{{shopObj.today_num}}</span>
            </div>
            <div class="data-cell">
              <h1>本月营业额</h1>
              <span>{{shopObj.month_money}}</span>
            </div>
          </div>
        </div>
        <div class="caiwu">
          <mt-cell title="财务查询"></mt-cell>
          <div class="select-date">
            <div class="date">开始日期: <input type="text" readonly placeholder="请选择日期" :value="startdate"
                                           @click="showCalendar(1)"></div>
            <div class="date">结束日期: <input type="text" readonly placeholder="请选择日期" :value="enddate"
                                           @click="showCalendar(2)"></div>

          </div>
          <mt-button type="default" @click="searchCW">查询</mt-button>
          <p class="p-je">总金额<span>￥{{zMoney}}</span></p>
        </div>
        <div class="caiwu">
          <mt-cell title="优惠券管理" to="/coupon" is-link></mt-cell>
        </div>
       <!-- <div class="caiwu" ref="printset" id="diva">
          <mt-cell title="打印机管理" id="a"></mt-cell>
        </div>-->
        <div class="dengc">
          <mt-button type="primary" @click="toexit">退出登录</mt-button>
        </div>
      </div>
    </div>
    <calendar :show="calendarShow" format="yyyy-MM-dd" @selected="selectedHandler"></calendar>


  </div>
</template>

<script>
  import {exit, saveHeadimg} from 'common/js/localStorage.js'
  import axios from 'axios'
  import BScroll from 'better-scroll'
  import {Toast} from 'mint-ui'
  import Calendar from 'vue-m-calendar';
  import selectPicker from 'components/common/selectPicker.vue'

  export default {
    data() {
      return {
        errorImg01: 'this.src="' + require('../.././assets/img_tx.jpg') + '"',
        shopObj: '',
        shopInfo: '',
        startdate: '',
        enddate: '',
        status: '',
        value: '',
        calendarShow: false,
        shopStatus: true,
        shopStatusStr: '',
        zMoney: '0'
      }
    },
    mounted() {
      var vueself = this;
      /*********************************hui*******************************************/

      mui.init({});

      //点击选择打印机事件
      mui("#diva").on("tap", "#a", function () {
        mui.openWindow({
          url: './set_printer.html',
          id: 'printer'
        })
      })

     /* var use_printer = localStorage.getItem("use_printer");
      if (use_printer == 'y'){
        vueself.$refs.printset.style.setProperty("display", "block");} else {
        vueself.$refs.printset.style.setProperty("display", "none");
      }*/

      /*********************************hui_end*******************************************/

      let token = localStorage.getItem("access_token");
      axios.post(HOST + "/Shop/index", {"access_token": token}).then((res) => {
        res = res.data
        if (res.result == 'success') {
          this.shopObj = res.data
          this.shopInfo = res.data.shop_info
          this.shopStatus = res.data.shop_info.open_status == 'y' ? true : false
          this.shopStatusStr = res.data.shop_info.open_status == 'y' ? '营业中' : '休息中'
        }
      })

      this.initScroll();

    },
    methods: {
      changeStatus() {
        let token = localStorage.getItem("access_token");
        let status = this.shopStatus == true ? 'y' : 'n'
        axios.post(HOST + "/Shop/update_status", {"access_token": token, "open_status": status}).then((res) => {
          res = res.data
          if (res.result == 'success') {
            this.shopStatus = !this.shopStatus
            if (this.shopStatus) {
              this.shopStatusStr = '营业中'
            } else {
              this.shopStatusStr = '休息中'
            }
          }
        })
      },
      toexit() {
        exit();
        // this.$router.push({ path: '/login' })
        window.location.href = "login.html";
      },
      searchCW() {
        let token = localStorage.getItem("access_token");
        let start = this.startdate;
        let end = this.enddate;
        if (start != '' && end != '') {
          axios.post(HOST + "/Shop/finance", {
            "access_token": token,
            "start_time": start,
            "end_time": end
          }).then((res) => {
            res = res.data
            if (res.result == 'success') {
              this.zMoney = res.data.fee
            }
          })
        } else {
          Toast({
            message: '查询时间不能为空',
            position: 'bottom',
            duration: 2000
          });
        }

      },
      showCalendar(style) {
        this.status = style;
        this.calendarShow = true;
      },
      selectedHandler(date) {
        this.calendarShow = false;
        if (this.status == 1) {
          this.startdate = date;
        } else {
          this.enddate = date
        }
      },
      initScroll() {
        if (this.contentScroll) {
          this.contentScroll.refresh();
        } else {
          this.contentScroll = new BScroll(this.$refs.askWrapper, {
            probeType: 3,
            click: true
          });
        }
        this.contentScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));

          //console.log("====scrollY" + this.scrollY)
        });
        this.contentScroll.on('touchend', (pos) => {
          // 下拉动作
          if (pos.y > 50) {
            //console.log('xiala')
          }
        });
        this.contentScroll.on('scrollEnd', () => {
          // 滚动到底部
          if (this.contentScroll.y <= (this.contentScroll.maxScrollY + 50)) {
            //console.log('shang')
            this.loadData();
          }
        })
      },

    },
    components: {
      selectPicker,
      Calendar
    }

  }
</script>

<style lang="stylus">
  .mar-top15
    margin-top: 15px

  hr
    margin: 0
    color: #ccc
    background: #ccc

  .shop
    background: #f2f2f2
    height: 100%
    width: 100%
    position: absolute
    top: 0
    left: 0
    .wrapper
      width: 100%
      height: 60%
      .content
        margin-bottom: 100px
        .caiwu
          background: #fff
          margin-top: 10px
          color: #333
          .mint-cell
            border-bottom: 1px solid #f1f1f1
          .select-date
            padding: 10px
            p
              font-size: 15px
              line-height: 35px
              border-bottom: 1px solid #f1f1f1
            .date
              height: 25px
              font-size: 14px
          button
            height: 30px
            width: 80%
            margin-left: 10%
            margin-bottom: 10px
          .p-je
            line-height: 35px
            margin: 0 10px
            border-top: 1px solid #f1f1f1
            span
              float: right
              font-size: 18px
              color: #f00
              font-weight: 700
        .shop-data
          margin-top: 100px
          .data-detail
            background: #fff
            border-top: 1px solid #f1f1f1
            display: flex
          .data-cell
            flex: 1
            text-align: center
            margin: 15px 0
            &:last-child
              border-right: none
            h1
              font-size: 14px
              margin-bottom: 8px
            span
              font-size: 16px
              color: #333
              font-weight: 700
            p
              font-size: 12px
              margin-top: 10px
              color: #696969
    .dengc
      padding: 10px 3px
      bottom: 50px
      .mint-button
        width: 100%

    .header
      position: fixed
      top: 0
      left: 0
      width: 100%
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1)
      background-color: #108ee9
      z-index: 8
      color: #666
      display: flex
      padding: 25px
      .h-img-div
        flex: 0 0 55px
        img
          width: 50px
          height: 50px
      .shop-info
        flex: 1
        margin-left: 20px
        color: #fff
        h1
          margin: 10px 0
        a
          font-size: 12px
          color: #d8d8d8
        span
          font-size: 12px
          background: rgba(255, 255, 255, 0.2)
          padding: 5px 25px
          position: absolute
          top: 60px
          right: 30px
          border-radius: 15px

</style>
